<template>
  <h1 style="width: 100%;text-align: center; margin-bottom: 30px">Spu管理</h1>
  <CategoryList/>
  <el-card shadow="always" :body-style="{padding:'20px'}" :style="{marginTop:'30px'}">
    <SpuList v-if="spuState === 0" @setState="setState"/>
    <SpuForm v-if="spuState === 1" :spuInfo="spuInfo" @setState="setState"/>
    <SkuForm v-if="spuState === 2"/>
  </el-card>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'Spu',
});
</script>
<script setup lang="ts">
import {ref} from 'vue';
import SpuList from '@/views/Project/Spu/components/SpuList/SpuList.vue';
import SpuForm from '@/views/Project/Spu/components/SpuForm/SpuForm.vue';
import SkuForm from '@/views/Project/Spu/components/SkuForm/SkuForm.vue';
import type {SpuInfoType} from '@/api/spu';
import useAttrStore from '@/stores/attr';
import {storeToRefs} from 'pinia';

const attrStore = useAttrStore();
const {category3Id} = storeToRefs(attrStore);

const spuState = ref<number>(0);
const spuInfo = ref<SpuInfoType>({
  category3Id: category3Id.value,
  description: '',
  spuName: '',
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: [],
});
const setState = (state: number, row?: SpuInfoType) => {
  spuState.value = state;
//  判断row是否存在如果存在就给form表单把spuinfo传递过去
  if (row) {
    spuInfo.value = row
  } else {
    spuInfo.value = {
      category3Id: category3Id.value,
      description: '',
      spuName: '',
      tmId: null,
      spuImageList: [],
      spuSaleAttrList: [],
    }
  }
};

</script>

<style scoped>

</style>